<template>
  <el-container>
    <el-header>
      <div class="report_header" ref="headerHeight">
        <div class="report_header_left"></div>
        <div style="display: flex;flex-direction: row;justify-content:space-between;width: 100%;">
          <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px">
<!--            <div class="report_header_query">-->
<!--              <el-select v-model="query.type" clearable placeholder="标签类型">-->
<!--                <el-option-->
<!--                  v-for="item in typeOptions"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value">-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--            </div>-->
<!--            <div class="report_header_query">-->
<!--              <el-input prefix-icon="el-icon-search" placeholder="标签名"  v-model="query.name"></el-input>-->
<!--            </div>-->
          </div>
          <div>
<!--          <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="queryTag">查询</el-button>-->
          <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="addClick"
                     v-permission="['tag.add']">新增</el-button>
          </div>
        </div>
      </div>
<!--      <div>-->
<!--        <svg-icon class="primary" :icon-class="$route.meta.icon"/>-->
<!--        <span class="primary">{{$route.meta.title}}</span>-->
<!--      </div>-->
<!--      <div class="header-button-container">-->
<!--        <el-button :icon="queryType? 'el-icon-search':'el-icon-close'" type="primary"-->
<!--                   @click="chooseClick">{{queryType == false?'隐藏':'查询'}}-->
<!--        </el-button>-->
<!--        <el-button v-permission="['tag.add']" icon="el-icon-plus" type="info" style="margin-left: 10px" @click="addClick">新增-->
<!--        </el-button>-->
<!--      </div>-->
    </el-header>
    <div class="pd10">
<!--      <div style="margin-bottom: 10px;display: flex;align-items: center" v-show="queryType == false">-->
<!--        <el-select v-model="query.type" clearable placeholder="标签类型">-->
<!--            <el-option-->
<!--              v-for="item in typeOptions"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        <el-input prefix-icon="el-icon-search" placeholder="标签名" style="margin-left: 10px; width: 200px" v-model="query.name"></el-input>-->
<!--        <el-button style="margin-left: 10px" icon="el-icon-search" type="primary" @click="queryTag">查询-->
<!--        </el-button>-->
<!--        <el-button style="margin-left: 10px" icon="el-icon-refresh-right" type="info" @click="resetTag">重置-->
<!--        </el-button>-->
<!--      </div>-->
      <el-table
        :data="contractForm"
        border
        stripe
        v-loadMore="[payLoads,'tag-list']"
        :height="curHeight"
        style="width: 100%">
        <el-table-column
          type="index"
          width="50"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="文件名称"
          width="180"
          align="center"
          prop="name"
        >
        </el-table-column>
        <el-table-column
          label="文件名称"
          width="180"
          align="center"
          prop="fileUrl"
        >
        </el-table-column>


        <el-table-column
          label="用户签署位置X"
          width="180"
          align="center"
          prop="psnX"
        >
        </el-table-column>
        <el-table-column
          label="用户签署位置y"
          width="180"
          align="center"
          prop="psnY"
        >
        </el-table-column>
        <el-table-column
          label="平台签署位置X"
          width="180"
          align="center"
          prop="orgX"
        >
        </el-table-column>
        <el-table-column
          label="平台签署位置Y"
          width="180"
          align="center"
          prop="orgY"
        >
        </el-table-column>
        <el-table-column
          label="日期签署位置X"
          width="180"
          align="center"
          prop="dateX"
        >
        </el-table-column>
        <el-table-column
          label="日期签署位置Y"
          width="180"
          align="center"
          prop="dateY"
        >
        </el-table-column>
        <el-table-column
          label="签章页数"
          width="180"
          align="center"
          prop="posPage"
        >
        </el-table-column>
        <el-table-column label="操作" align="center" width="80">
          <template slot-scope="scope">
            <div>
              <el-tooltip v-permission="['tag.edit']" class="item" effect="dark" content="编辑" placement="top-start">
                <a @click="editClick(scope.row)">
                  <i style="color: #409EFF" class="el-icon-edit"></i>
                </a>
              </el-tooltip>
              <el-tooltip v-permission="['tag.del']" class="item" effect="dark" content="删除" placement="top-start">
                <a style="margin-left: 10px" @click="deleteTag(scope.row)">
                  <i style="color: #F56C6C" class="el-icon-delete"></i>
                </a>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--新增标签-->
      <el-dialog title="新增合同" v-el-drag-dialog :visible.sync="dialogFormVisible">
        <el-container>
          <el-main class="popup_content">
            <el-form ref="addForm" :model="addForm" :rules="rules" label-width="80px" size="mini">
              <el-form-item label="合同名称" prop="name">
                <el-input v-model="addForm.name"></el-input>
              </el-form-item>
              <el-form-item label="合同路径" prop="fileUrl">
                <el-input v-model="addForm.fileUrl"></el-input>
              </el-form-item>

              <el-form-item label="用户签署位置X" prop="psnX">
                <el-input v-model="addForm.psnX"></el-input>
              </el-form-item>
              <el-form-item label="用户签署位置y" prop="psnY">
                <el-input v-model="addForm.psnY"></el-input>
              </el-form-item>

              <el-form-item label="平台签署位置X" prop="orgX">
                <el-input v-model="addForm.orgX"></el-input>
              </el-form-item>
              <el-form-item label="平台签署位置Y" prop="orgY">
                <el-input v-model="addForm.orgY"></el-input>
              </el-form-item>

              <el-form-item label="日期签署位置X" prop="dateX">
                <el-input v-model="addForm.dateX"></el-input>
              </el-form-item>
              <el-form-item label="日期签署位置Y" prop="dateY">
                <el-input v-model="addForm.dateY"></el-input>
              </el-form-item>

              <el-form-item label="签章页数" prop="posPage">
                <el-input v-model="addForm.posPage"></el-input>
              </el-form-item>

            </el-form>
          </el-main>
        </el-container>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" :loading="clicked" @click="saveTag('addForm')">确 定</el-button>
        </div>
      </el-dialog>
      <!--编辑标签-->
      <el-dialog title="编辑合同" v-el-drag-dialog :visible.sync="editVisible">
        <el-container>
          <el-main class="popup_content">
            <el-form ref="editForm" :model="editForm" :rules="rules" label-width="80px" size="mini">

              <el-form-item label="合同名称" prop="name">
                <el-input v-model="editForm.name"></el-input>
              </el-form-item>
              <el-form-item label="合同路径" prop="fileUrl">
                <el-input v-model="editForm.fileUrl"></el-input>
              </el-form-item>

              <el-form-item label="用户签署位置X" prop="psnX">
                <el-input v-model="editForm.psnX"></el-input>
              </el-form-item>
              <el-form-item label="用户签署位置y" prop="psnY">
                <el-input v-model="editForm.psnY"></el-input>
              </el-form-item>

              <el-form-item label="平台签署位置X" prop="orgX">
                <el-input v-model="editForm.orgX"></el-input>
              </el-form-item>
              <el-form-item label="平台签署位置Y" prop="orgY">
                <el-input v-model="editForm.orgY"></el-input>
              </el-form-item>

              <el-form-item label="日期签署位置X" prop="dateX">
                <el-input v-model="editForm.dateX"></el-input>
              </el-form-item>
              <el-form-item label="日期签署位置Y" prop="dateY">
                <el-input v-model="editForm.dateY"></el-input>
              </el-form-item>

              <el-form-item label="签章页数" prop="posPage">
                <el-input v-model="editForm.posPage"></el-input>
              </el-form-item>

<!--              <el-form-item label="图标">-->
<!--                <single-upload :singleUploadTitle='singleUploadTitle' :key="Math.random()" v-model="editForm.icon"-->
<!--                               style="display: inline-block;"></single-upload>-->
<!--              </el-form-item>-->
            </el-form>
          </el-main>
        </el-container>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" :loading="clicked" @click="updateTag('editForm')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <el-footer class="el-footerBox">
      <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                  @pagination="loadTag"></pagination>
    </el-footer>
  </el-container>
</template>

<script>
  import loadMore from '@/utils/loadMore.js'
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import {list, del, find, save, update} from '@/api/esignFile'

  import utils from '../../utils/utils.js'
  import Pagination from '@/components/Pagination';
  // import SingleUpload from '@/components/Upload/singleUpload'
  import SingleUpload from '@/components/Upload/fileUpload'
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  export default {
    directives: { elDragDialog ,permission,loadMore},
    activated() {
      this.payLoads = new Date().getTime();
      console.log('1111')
      console.log(utils.getUUID())
      console.log('2222')
    },
    name: 'tag-list',
    data() {
      return {
        singleUploadTitle:'200*200',
        payLoads:'',
        addForm: {
          name: '',
          fileUrl:'',
          psnX: 0,
          psnY: 0,
          orgX: 0,
          orgY: 0,
          dateX: 0,
          dateY: 0,
          posPage: 0,
        },
        dialogFormVisible: false,
        rules: {
          name: [
            {required: true, message: '请输入标签名称', trigger: 'blur'},
            {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
          ],
          type:[
            {required: true, message: '请选择标签类型', trigger: 'blur'},
          ]
        },
        editVisible: false,
        editForm: {
          name: '',
          fileUrl:'',
          psnX: "",
          psnY: "",
          orgX:"",
          orgY: "",
          dateX: "",
          dateY: "",
          posPage: "",
        },
        contractForm: [],
        pageNum: 1,
        pageSize: 20,
        total: 0,
        queryType: true,
        query: {
          name: '',
          type: ''
        },
        keyword: {
          name: '',
          type: ''
        },
        clicked: false,
        curHeight: null,
        sorting: {
          id: '',
          orders: ''
        },
      }
    },
    components: {Pagination, SingleUpload},
    created() {
      this.loadTag()
    },
    mounted() {
      this.comeIn()
      this.beforeMount()
    },
    methods: {
      // 表格排序
      sortChange(column){
        console.log(column)
        this.sortField = column.prop;
        if(column.order == 'ascending'){
          this.direction = 'asc'
        }else {
          this.direction = 'desc'
        }
        this.loadBrand()
      },
      bulrOrders(data) {
        console.log(data)
        this.sorting.id = data.id;
        this.sorting.orders = data.orders;
        this.saveSorting();
      },
      saveSorting() {
        var _this = this
        update(_this.sorting).then(response => {
          console.log(response)
          _this.contractForm.forEach(function (item) {
            if (item.id == response.data.id) {
              item.orders = response.data.orders
            }
          });
          _this.$message({
            message: response.content,
            offset: 120,
            center: true
          });
        }).catch(error => {
          console.log(error)
        });
      },
      saveTag(addForm) {
        var _this = this;
        this.$refs[addForm].validate((valid) => {
          if (valid) { // 校验表单
            _this.clicked = true
            _this.addForm

            let params = {
              "createDate": "2021-12-24T08:59:03.968Z",
              "dateX": this.addForm.dateX,
              "dateY": this.addForm.dateY,
              "enterpriseId": 0,
              "fileId": "string",
              "fileUrl": this.addForm.fileUrl,
              "id": 0,
              "modifyDate": "2021-12-24T08:59:03.968Z",
              "name": this.addForm.name,
              "orgX": this.addForm.orgX,
              "orgY": this.addForm.orgY,
              "posPage": this.addForm.posPage,
              "psnX": this.addForm.psnX,
              "psnY": this.addForm.psnY
            }
            save(params).then(response => {
              console.log(response);
              _this.clicked = false;
              _this.dialogFormVisible = false;
              _this.loadTag()
              _this.$message({
                message: response.content,
                offset: 120,
                center: true
              });
            }).catch(error => {
              _this.clicked = false;
              console.log('error!!')
            });
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
//新增
      addClick() {
        this.addForm.name = '';
        this.addForm.memo = '';
        this.addForm.type = '';
        this.addForm.icon = "";
        this.dialogFormVisible = true;
      },
      //  编辑
      editClick(row) {
        this.editForm.id = row.id;
        this.findTag()
        this.editVisible = true
      },
      findTag() {
        var _this = this;
        find(_this.editForm.id).then(response => {
          console.log(response)
          _this.editForm.name = response.data.esignFile.name;
          _this.editForm.fileUrl = response.data.esignFile.fileUrl;
          _this.editForm.id = response.data.esignFile.id;

          _this.editForm.psnX = response.data.esignFile.psnX;
          _this.editForm.psnY = response.data.esignFile.psnY;
          _this.editForm.orgX = response.data.esignFile.orgX;
          _this.editForm.orgY = response.data.esignFile.orgY;
          _this.editForm.dateX = response.data.esignFile.dateX;
          _this.editForm.dateY = response.data.esignFile.dateY;
          _this.editForm.posPage = response.data.esignFile.posPage;

        }).catch(error => {
          console.log('error!!')
        });
      },
      updateTag(editForm) {
        var _this = this
        this.$refs[editForm].validate((valid) => {
          if (valid) { // 校验表单
            _this.clicked = true
            let params ={
              "createDate": "2021-12-24T09:45:05.473Z",
              "dateX": this.editForm.dateX,
              "dateY": this.editForm.dateY,
              "enterpriseId": 0,
              // "fileId": "string",
              "fileUrl": this.editForm.fileUrl,
              "id": this.editForm.id,
              "modifyDate": "2021-12-24T09:45:05.473Z",
              "name": this.editForm.name,
              "orgX": this.editForm.orgX,
              "orgY": this.editForm.orgY,
              "posPage": this.editForm.posPage,
              "psnX": this.editForm.psnX,
              "psnY": this.editForm.psnY
            }
            update(params).then(response => {
              console.log(response);
              _this.clicked = false;
              _this.editVisible = false;
              _this.loadTag()
              _this.$message({
                message: response.content,
                offset: 120,
                center: true
              });
            }).catch(error => {
              _this.clicked = false;
              console.log('error!!')
            });
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            if (this.queryType == false) {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 266//减去页面上固定高度height
            } else {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 220//减去页面上固定高度height
            }
          })();
        };
      },
      comeIn() {
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 220//减去页面上固定高度height
      },
      chooseClick() {
        this.queryType = !this.queryType
        if (this.queryType == false) {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 266//减去页面上固定高度height
        } else {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 220//减去页面上固定高度height
        }
      },
      deleteTag(data) {
        console.log(data)
        var _this = this;
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del(data.id).then(response => {
            console.log(response)
            _this.contractForm.forEach(function (item, index) {
              if (item.id == data.id) {
                _this.contractForm.splice(index, 1)
              }
            });
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
          }).catch(error => {
            console.log('error!!')
          });
        }).catch(() => {

        })
      },
      queryTag() {
        this.keyword = this.query;
        this.pageNum = 1
        this.loadTag()
      },
      resetTag() {
        this.query.name = '';
        this.query.type = '';
        this.keyword = this.query;
        this.pageNum = 1;
        this.loadTag()
      },
      loadTag() {
        var _this = this
        let params = new URLSearchParams();
        params.append('pageNum', _this.pageNum);
        params.append('pageSize', _this.pageSize);
        // params.append('name', _this.keyword.name);
        // params.append('type', _this.keyword.type);
        list(params).then(response => {
          console.log(response)
          _this.contractForm = response.data.data
          _this.total = response.data.total
        }).catch(error => {
          console.log('error!!')
        });
      },
    }
  }
</script>

<style scoped>
  .el-footerBox {
    height: 50px !important;
    line-height: 50px !important;
    border-top: 1px solid #eeeeee;
  }

  /deep/ .el-dialog__header {
    border: 1px solid #eeeeee !important;
    padding: 15px !important;
  }

  /deep/ .el-dialog__body {
    padding: 0px 20px !important;
  }

  .popup_content {
    padding-bottom: 0px !important;
  }
  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }
  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }
  .report_header_date {
    margin-left: 10px;
    width: 250px;
    margin-top: 5px;
  }
  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }
</style>
